import { defineComponent, computed } from 'vue';
import Modeler from './components/modeler';
import Panel from './components/panel';
import BpmnActions from './components/bpmn-actions';
import Downloader from './components/downloader';
import './index.css';
import './bpmn-custom.scss'

export default defineComponent({
  name: 'BpmnEditor',
  props: {
    xml: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const xml = computed({
      get: () => props.xml,
      set: (val) => {
        emit('update:xml', val)
      }
    })
    return () => (
      <div class="bpmn-editor">
        <Modeler v-model:xml={xml.value} />
        <Panel />
        <BpmnActions />
        <Downloader />
      </div>
    );
  },
});
